@import url(./utils.less);
@classname: container;
@mianName: visual;


.@{classname} {
  width: 100%;
  height: 100%;

  .@{classname}_header {
    width: 100%;
    height: 40px;
    background: url('../../../globle/image/login/jcdsj_logo.gif') no-repeat;
    background-size: cover;

    p {
      text-align: center;
      font-weight: @font-weight-300;
      font-size: @FontSize-big;
      color: @white;
    }
  }
}

.@{mianName} {
  width: 100%;
  height: 100%;
//   height: calc(100% - 40px);
  display: flex;
  flex-flow: row nowrap;
  color: @white;

  .@{mianName}_left {
    width: 25%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;

    .sfzcll {
      position: relative;
    }

    .sfzcll a {
      width: 32%;
      text-align: center;
      line-height: 25px;
      color: #fff;
      display: inline-block;
    }

    .sfzcll .sfzcll_pos_box {
      width: 100%;
      height: calc(100% - 30px);
    }

    .sfzcll .sfzcll_box {
      width: 100%;
      height: calc(33% - 15px);
      line-height: 5;
      background: rgba(15, 47, 72, 0.8);
      border: 1px solid #1380bd;
      position: relative;
      margin-bottom: 15px;
    }

    .sfzcll .sfzcll_box:last-of-type {
      margin: 0;
    }

    .sfzcll .sfzcll_box .sfzcll_bkJk {
      position: absolute;
    }

    .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type {
      top: -2px;
      left: -2px;
    }

    .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2) {
      top: -2px;
      right: -2px;
    }

    .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3) {
      bottom: -2px;
      right: -2px;
    }

    .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4) {
      bottom: -2px;
      left: -2px;
    }

    .sfzcll .sfzcll_box label {
      width: 33%;
      color: #fff;
      text-align: center;
      float: left;
    }

    .sfzcll .sfzcll_box label img {
      width: 23px;
      height: 23px;
      margin-right: 5px;
      margin-top: -2px;
    }

    .sfzcll .sfzcll_box .sfzcll_smallBk {
      width: 33%;
      height: 100%;
      float: left;
      padding: 2px 5px;
    }

    .sfzcll .sfzcll_box .sfzcll_smallBk>div {
      height: 100%;
      background: url(../../../globle/image/login/ksh38.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 1.5em;
    }

    .sfzcll .sfzcll_box .sfzcll_smallBk .ygl {
      color: #00ffc6;
    }

    .sfzcll .sfzcll_box .sfzcll_smallBk .ygh {
      color: #ffe400;
    }
  }

  .@{mianName}_content {
    width: 50%;
    height: 100%;
    padding: 25px 20px 0 20px;

    .@{mianName}_conTop {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
      border-radius: 5px;
      background-color: rgba(101, 132, 226, .1);
      ;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .@{mianName}_conTop_box {
        height: 100%;
        padding: 0 3px;
      }

      .@{mianName}_conTop1 {
        width: 25%;
        height: 100%;
        float: left;
        position: relative;
      }

      .@{mianName}_conTop1>div {
        background: url(../../../globle/image/login/ksh40.png) no-repeat;
        background-size: 100% 100%;
      }

      .@{mianName}_conTop2 {
        width: 25%;
        height: 100%;
        float: left;
        position: relative;
      }

      .@{mianName}_conTop2>div {
        background: url(../../../globle/image/login/ksh39.png) no-repeat;
        background-size: 100% 100%;
      }

      .@{mianName}_conTop_box>div {
        height: 100%;

        h3 {
          color: #fff;
          font-size: 16px;
          padding: 16px 0 0 20px;
        }

        p {
          width: 80%;
          float: left;
          line-height: @lineHeight-big;
          color: #20dbfd;
          text-shadow: 0 0 25px #00d8ff;
          font-size: @FontSize-big;
          font-family: 'yjsz';
          text-align: right;
          cursor: pointer;
          overflow: hidden;
          text-align:left;
          white-space: nowrap;
          /*不显示的地方用省略号...代替*/
          padding:0 0 0 15px;
          text-overflow: ellipsis;
          /* 支持 IE */
        }

        .currentCountry {
          width: 150px;
          float: left;
          line-height: @lineHeight-big;
          color: #20dbfd;
          text-shadow: 0 0 25px #00d8ff;
          font-size: @FontSize-base;
          font-family: 'yjsz';
          text-align: right;
          cursor: pointer;
          border-bottom: 1px solid @lightBlue;
          text-align: center;
          margin-left: 10px;

          .currentCountry_content {
            width: 100%;
            position: relative;

            .currentCountry_content_true {
              display: flex;
              justify-content: space-between;

              span {
                width: 90%;
                text-align: center;
              }
            }
          }
        }

        .reversDirection {
          transform: rotate(-180deg);
          transition: .5s;
        }

        .conTop_img {
          position: absolute;
          right: 15px;
          top: 5px;

          .icon {
            font-size: @FontSize-max;
          }

          i {
            font-size: @FontSize-max;
            cursor: pointer;
          }
        }

        .conTop_smil {
          width: 67%;
          height: 60px;
          float: left;
          padding-top: 23px;

          a {
            display: block;
            line-height: 20px;
            text-align: left;
            color: #fff;
            padding-left: 9px;
          }

          a.sz {
            color: #fe3e12;
          }

          a.xd {
            color: #12fe81;
          }

          span {
            width: 32px;
            display: inline-block;
            margin-left: 3px;
          }

          a.null {
            visibility: hidden;
          }
        }
      }
    }

    .@{mianName}_conBot {
      height: calc(100% - 100px);
      background: url(../../../globle/image/login/ksh41.png) no-repeat;
      background-size: 100% 100%;
      position: relative;

      img {
        position: absolute;
        width: 25px;
        height: 25px;
      }

      .@{mianName}_conBot_l {
        position: absolute;
        left: 0;
        top: 0;
      }

      .@{mianName}_conBot_2 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .@{mianName}_conBot_3 {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .@{mianName}_conBot_4 {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      .@{mianName}_chart_text {
        color: #fff;
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 99;

        h1 {
          font-size: @FontSize-big;
          margin-bottom: 6px;
        }

        h2 {
          font-size: @FontSize-base;
        }
      }

      .@{mianName}_chart {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }

    .visual_conBot .visual_conBot_bot {
      width: calc(100% - 8px);
      height: 180px;
      background: rgba(16, 54, 87, 0.5);
      border: 1px solid #345f92;
      position: absolute;
      bottom: 4px;
      left: 4px;
      z-index: @zindex-lg;
    }
  }

  .@{mianName}_right {
    width: 25%;
    height: 100%;
    float: right;

    .visualSssf_left {
      width: 40%;
      float: left;
      color: #fff;
      padding: 10px 20px 0 20px;
    }

    .visualSssf_left h3 {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .visualSssf_left a {
      width: 32%;
      color: #fff;
      display: inline-block;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .visualSssf_left a.active {
      color: #01f0ff;
    }

    .visualSssf_right {
      width: 60%;
      height: 100%;
      float: left;
    }

    .visualSssf_right .visualSssf_right_box {
      width: 33%;
      float: left;
      height: 100%;
    }

    .visualSfzsfl {
      position: relative;
    }

    .visualSfzsfl .visual_chart {
      opacity: 0.6
    }

    .visualSfzsfl .visual_table {
      width: 60%;
      position: absolute;
      z-index: 99;
      top: 40px;
      left: 0;
    }

    .visualSfzsfl .visual_table table {
      width: 100%;
      color: #fff;
      text-align: center;
    }

    .visualSfzsfl .visual_table table tr {
      border-bottom: 1px dashed #ddd;
    }

    .visualSfzsfl .visual_table table tr:first-child {
      color: #01c0ff;
    }

    .visualSfzsfl .visual_table table tr:last-child {
      border-bottom: 1px solid #ddd;
    }

  }

  .@{mianName}_box {
      width: 100%;
    height: 33.3%;

    .@{mianName}_title {
      position: relative;
      width: 100%;
      height: 35px;
      font-size: @FontSize-mini;
      margin: 5px 0;
      display:flex;

      span {
        line-height: 35px;
      }
      .select_year{
        width:20%;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      img {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .@{mianName}_title__img{
        width: 80%;
      }
    }

    .@{mianName}_chart {
      height: calc(100% - 35px);
    }
  }

}